<template>
  <div class="dashboard-editor-container">

    <panel-group :panelData="panelData" @handleSetLineChartData="handleSetLineChartData"/>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData"/>
    </el-row>

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="cancel-order">
          <p class="title">卖家取消中的订单，请及时处理！</p>
          <el-table :data="cancelOrderData">
            <el-table-column prop="orderSn" label="订单编号"/>
            <el-table-column prop="region" label="地区" width="50"/>
            <el-table-column prop="shopName" label="店铺名"/>
            <el-table-column prop="orderStatus" label="问题" width="50">
              <template slot-scope="{ row }">
                <span :class="{'text-danger': row.orderStatus === 'IN_CANCEL'}">{{ getOrderStatusText(row.orderStatus) }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart :chart-data="barChartData"/>
        </div>
      </el-col>
    </el-row>


  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import {
  getInCancelOrder
} from "@/api/order/order";
import {getPanelData, getDailySaleData, getMonthSaleData} from "@/api/statistic/indexChart";

// const lineChartData = {
//   newVisitis: {
//     expectedData: [1, 2, 3, 4, 2, 3, 1],
//     actualData: [120, 82, 91, 154, 162, 140, 145]
//   },
//   messages: {
//     expectedData: [200, 192, 120, 144, 160, 130, 140],
//     actualData: [180, 160, 151, 106, 145, 150, 130]
//   },
//   purchases: {
//     expectedData: [80, 100, 121, 104, 105, 90, 100],
//     actualData: [120, 90, 100, 138, 142, 130, 130]
//   },
//   shoppings: {
//     expectedData: [130, 140, 141, 142, 145, 150, 160],
//     actualData: [120, 82, 91, 154, 162, 140, 130]
//   }
// }

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      cancelOrderData: [],
      lineChartData: null,
      barChartData: null,
      panelData: {
        toHandle: 0,
        emergency: 0,
        salesAmount: 0,
        orderAmount: 0,
      },
    }
  },
  created() {
    this.getData();
    this.getInCancelOrderData();
  },
  methods: {
    getInCancelOrderData() {
      getInCancelOrder().then((response) => {
        this.cancelOrderData = response.data;
      });
    },
    getOrderStatusText(orderStatus) {
      switch (orderStatus) {
        case 'IN_CANCEL':
          return '取消';
        case 'TO_RETURN':
          return '退货';
        // 添加其他可能的情况
        default:
          return '未知状态';
      }
    },
    getData() {
      //获取顶部面板数据
      getPanelData().then((response) => {
        this.panelData = response.data;
      });
      //封装折线图数据
      this.getLineChartData();
      this.getBarChartData();
    },
    getLineChartData() {
      getDailySaleData().then((response) => {
        const lineChartData = {
          dates: response.data.map(item => item.date),
          orderNums: response.data.map(item => item.orderNum),
          saleAmounts: response.data.map(item => item.saleAmount),
        }
        this.lineChartData = lineChartData;
      });
    },
    getBarChartData() {
      getMonthSaleData().then((response) => {
        const barChartData = {
          months: response.data.map(item => item.month),
          orderNums: response.data.map(item => item.orderNum),
          saleAmounts: response.data.map(item => item.saleAmount),
        }
        this.barChartData = barChartData;
      });
    },
    //old
    handleSetLineChartData(type) {
      //this.lineChartData = lineChartData[type]
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.scss';

.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }

  .cancel-order {

    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
    min-height: 316px;

    .title {
      text-align: center;
      font-weight: bold;
      color: $themeSubColor;
      margin-top: 0px;
    }

    .text-danger {
      color: $themeSubColor;
    }
  }
}


@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
